<template>
  <el-container class="friends_tas">
    <el-main>
      <el-card shadow="never" class="selectCard searchColumn">
        <el-form label-position="right" label-width="6rem">
          <el-row :gutter="40">
            <el-col :span="8">
              <el-form-item label="标签名称：">
                <el-input v-model="searchParams.tagsName" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="8" style="float: right;">
              <search-button :default-params="searchParams" @refreshParams="refreshParams" @getList="getList" />
            </el-col>
          </el-row>

        </el-form>
      </el-card>
      <el-card shadow="never" class="commercia-tenant-list-title tableCard">
        <vxe-toolbar>
          <template v-slot:buttons>
            <el-button type="primary" icon="el-icon-plus" size="small" @click="openModal('', 1, false)">新增</el-button>
          </template>
          <template v-slot:tools>
            <vxe-button class="tool-btn" type="text" size="small" icon="el-icon-refresh" @click="getList()">刷新</vxe-button>
          </template>
        </vxe-toolbar>
        <vxe-table
          ref="xTree"
          border
          stripe
          resizable
          highlight-hover-row
          :loading="loading"
          :auto-resize="true"
          :data="activitiesList"
          height="420"
          :print-config="{}"
        >
          <vxe-table-column type="seq" align="center" width="50" title=" " />
          <vxe-table-column field="tagsName" title="标签名称" width="220" />
          <vxe-table-column field="tagsRules" title="标签规则" min-width="220" />
          <vxe-table-column field="meetGroupNum" width="120" title="符合的群数" />
          <vxe-table-column field="status" width="80" align="center" title="状态">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.status" :inactive-value="0" :active-value="1" active-text inactive-text @change="changeState(scope)" />
            </template>
          </vxe-table-column>
          <vxe-table-column title="操作" fixed="right" width="150" align="center" slots="default">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="openModal(scope.row.id, 2, true)">查看</el-button>
              <el-button v-if="scope.row.status != 1" type="text" size="mini" @click="openModal(scope.row.id, 2, false)">编辑</el-button>
              <el-button v-if="scope.row.status != 1" type="text" size="mini" @click="del(scope.row.id)">删除</el-button>
            </template>
          </vxe-table-column>
        </vxe-table>
        <vxe-pager
          :current-page.sync="tableCurrentPage"
          :page-size.sync="pageSize"
          :total="total"
          :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
          @page-change="getList()"
        />
      </el-card>
    </el-main>
    <el-dialog v-if="dialogVisible" width="50%" title="添加标签" :visible.sync="dialogVisible" :close-on-click-modal="false">
      <el-form ref="ruleForm" :model="params" :rules="rules" label-width="6rem">
        <el-row :gutter="40">
          <el-col :span="24">
            <el-form-item prop="tagsName" label="标签名称：">
              <div style="width:80%;">
                <el-input v-model="params.tagsName" :disabled="diabledEdit" />
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="tagsList" label="标签规则：">
              <div style="display: inline-block;justify-content: flex-start;width: 100%;">
                <div style="display: flex;justify-content:flex-start; float:left;padding-left: 20px;background: #f8f8f8;border-color:  #aaffff; width: 100%;">
                  <el-checkbox v-model="params.tagsRuleBO.checkGroupPersons" :disabled="diabledEdit" :true-label="1" :false-label="0">群人数</el-checkbox>
                  <div style="width:100px;margin-left: 50px;">
                    <el-select v-model="params.tagsRuleBO.groupPersonsFormula" :disabled="diabledEdit || params.tagsRuleBO.checkGroupPersons === 0" size="small" placeholder="请选择">
                      <el-option label="大于" value="1" />
                      <el-option label="等于" value="2" />
                      <el-option label="小于" value="3" />
                    </el-select>
                  </div>
                  <div style="width:80px;margin-left: 10px;">
                    <el-input v-model="params.tagsRuleBO.groupPersonsNum" size="small" :disabled="diabledEdit || params.tagsRuleBO.checkGroupPersons === 0 " />
                  </div>
                  <span style="font-size: 11px;margin-left: 10px;">人</span>
                </div>
                <div style="display: inline-flex;justify-content: left;padding-left: 20px;background: #f8f8f8;border-color:  #aaffff; width: 100%;">
                  <el-checkbox v-model="params.tagsRuleBO.checkTalkTimes" :disabled="diabledEdit" :true-label="1" :false-label="0">会话次数最近</el-checkbox>
                  <div style="width:80px;margin-left: 10px;">
                    <el-input v-model="params.tagsRuleBO.talkTimesLastDays" size="small" :disabled="diabledEdit || params.tagsRuleBO.checkTalkTimes === 0" />
                  </div>
                  <span style="font-size: 11px;margin-left: 10px;">天</span>
                  <div style="width:100px;margin-left: 10px;">
                    <el-select v-model="params.tagsRuleBO.talkTimesDaysFormula" :disabled="diabledEdit || params.tagsRuleBO.checkTalkTimes === 0" size="small" placeholder="请选择">
                      <el-option label="平均每天" value="1" />
                      <el-option label="每天" value="2" />
                      <el-option label="总共" value="3" />
                    </el-select>
                  </div>
                  <div style="width:100px;margin-left: 10px;">
                    <el-select v-model="params.tagsRuleBO.talkTimesFormula" :disabled="diabledEdit || params.tagsRuleBO.checkTalkTimes === 0" size="small" placeholder="请选择">
                      <el-option label="大于" value="1" />
                      <el-option label="等于" value="2" />
                      <el-option label="小于" value="3" />
                    </el-select>
                  </div>
                  <div style="width:80px;margin-left: 10px;">
                    <el-input v-model="params.tagsRuleBO.talkTimesNum" size="small" :disabled="diabledEdit || params.tagsRuleBO.checkTalkTimes === 0" />
                  </div>
                  <span style="font-size: 11px;margin-left: 10px;">条</span>
                </div>
                <div style="display: inline-flex;justify-content: left;padding-left: 20px;background: #f8f8f8;border-color:  #aaffff; width: 100%;">
                  <el-checkbox v-model="params.tagsRuleBO.checkTalkPersons" :disabled="diabledEdit" :true-label="1" :false-label="0">会话人数最近</el-checkbox>
                  <div style="width:80px;margin-left: 10px;">
                    <el-input v-model="params.tagsRuleBO.talkPersonsLastDays" size="small" :disabled="diabledEdit || params.tagsRuleBO.checkTalkPersons === 0" />
                  </div>
                  <span style="font-size: 11px;margin-left: 10px;">天</span>
                  <div style="width:100px;margin-left: 10px;">
                    <el-select v-model="params.tagsRuleBO.talkPersonsDaysFormula" :disabled="diabledEdit || params.tagsRuleBO.checkTalkPersons === 0" size="small" placeholder="请选择">
                      <el-option label="平均每天" value="1" />
                      <el-option label="每天" value="2" />
                      <el-option label="总共" value="3" />
                    </el-select>
                  </div>
                  <div style="width:100px;margin-left: 10px;">
                    <el-select v-model="params.tagsRuleBO.talkPersonsFormula" :disabled="diabledEdit || params.tagsRuleBO.checkTalkPersons === 0" size="small" placeholder="请选择">
                      <el-option label="大于" value="1" />
                      <el-option label="等于" value="2" />
                      <el-option label="小于" value="3" />
                    </el-select>
                  </div>
                  <div style="width:80px;margin-left: 10px;">
                    <el-input v-model="params.tagsRuleBO.talkPersonsNum" size="small" :disabled="diabledEdit || params.tagsRuleBO.checkTalkPersons === 0" />
                  </div>
                  <span style="font-size: 11px;margin-left: 10px;">条</span>
                </div>
                <div style="display: inline-flex;justify-content: left;padding-left: 20px;background: #f8f8f8;border-color:  #aaffff; width: 100%;">
                  <el-checkbox v-model="params.tagsRuleBO.checkPayTimes" :disabled="diabledEdit" :true-label="1" :false-label="0">支付次数最近</el-checkbox>
                  <div style="width:80px;margin-left: 10px;">
                    <el-input v-model="params.tagsRuleBO.payTimesLastDays" size="small" :disabled="diabledEdit || params.tagsRuleBO.checkPayTimes === 0" />
                  </div>
                  <span style="font-size: 11px;margin-left: 10px;">天</span>
                  <div style="width:100px;margin-left: 10px;">
                    <el-select v-model="params.tagsRuleBO.payTimesDaysFormula" :disabled="diabledEdit || params.tagsRuleBO.checkPayTimes === 0" size="small" placeholder="请选择">
                      <el-option label="平均每天" value="1" />
                      <el-option label="每天" value="2" />
                      <el-option label="总共" value="3" />
                    </el-select>
                  </div>
                  <div style="width:100px;margin-left: 10px;">
                    <el-select v-model="params.tagsRuleBO.payTimesFormula" :disabled="diabledEdit || params.tagsRuleBO.checkPayTimes === 0" size="small" placeholder="请选择">
                      <el-option label="大于" value="1" />
                      <el-option label="等于" value="2" />
                      <el-option label="小于" value="3" />
                    </el-select>
                  </div>
                  <div style="width:80px;margin-left: 10px;">
                    <el-input v-model="params.tagsRuleBO.payTimesNum" size="small" :disabled="diabledEdit || params.tagsRuleBO.checkPayTimes === 0" />
                  </div>
                  <span style="font-size: 11px;margin-left: 10px;">条</span>
                </div>
                <div style="display: inline-flex;justify-content: left;padding-left: 20px;background: #f8f8f8;border-color:  #aaffff; width: 100%;">
                  <el-checkbox v-model="params.tagsRuleBO.checkPayPersons" :disabled="diabledEdit" :true-label="1" :false-label="0">支付人数最近</el-checkbox>
                  <div style="width:80px;margin-left: 10px;">
                    <el-input v-model="params.tagsRuleBO.payPersonsLastDays" size="small" :disabled="diabledEdit || params.tagsRuleBO.checkPayPersons === 0" />
                  </div>
                  <span style="font-size: 11px;margin-left: 10px;">天</span>
                  <div style="width:100px;margin-left: 10px;">
                    <el-select v-model="params.tagsRuleBO.payPersonsDaysFormula" :disabled="diabledEdit || params.tagsRuleBO.checkPayPersons === 0" size="small" placeholder="请选择">
                      <el-option label="平均每天" value="1" />
                      <el-option label="每天" value="2" />
                      <el-option label="总共" value="3" />
                    </el-select>
                  </div>
                  <div style="width:100px;margin-left: 10px;">
                    <el-select v-model="params.tagsRuleBO.payPersonsFormula" :disabled="diabledEdit || params.tagsRuleBO.checkPayPersons === 0" size="small" placeholder="请选择">
                      <el-option label="大于" value="1" />
                      <el-option label="等于" value="2" />
                      <el-option label="小于" value="3" />
                    </el-select>
                  </div>
                  <div style="width:80px;margin-left: 10px;">
                    <el-input v-model="params.tagsRuleBO.payPersonsNum" size="small" :disabled="diabledEdit || params.tagsRuleBO.checkPayPersons === 0" />
                  </div>
                  <span style="font-size: 11px;margin-left: 10px;">条</span>
                </div>
                <div style="display: inline-flex;justify-content: left;padding-left: 20px;background: #f8f8f8;border-color:  #aaffff; width: 100%;">
                  <el-checkbox v-model="params.tagsRuleBO.checkPayAmount" :disabled="diabledEdit" :true-label="1" :false-label="0">支付金额最近</el-checkbox>
                  <div style="width:80px;margin-left: 10px;">
                    <el-input v-model="params.tagsRuleBO.payAmountLastDays" size="small" :disabled="diabledEdit || params.tagsRuleBO.checkPayAmount === 0" />
                  </div>
                  <span style="font-size: 11px;margin-left: 10px;">天</span>
                  <div style="width:100px;margin-left: 10px;">
                    <el-select v-model="params.tagsRuleBO.payAmountDaysFormula" :disabled="diabledEdit || params.tagsRuleBO.checkPayAmount === 0" size="small" placeholder="请选择">
                      <el-option label="平均每天" value="1" />
                      <el-option label="每天" value="2" />
                      <el-option label="总共" value="3" />
                    </el-select>
                  </div>
                  <div style="width:100px;margin-left: 10px;">
                    <el-select v-model="params.tagsRuleBO.payAmountFormula" :disabled="diabledEdit || params.tagsRuleBO.checkPayAmount === 0" size="small" placeholder="请选择">
                      <el-option label="大于" value="1" />
                      <el-option label="等于" value="2" />
                      <el-option label="小于" value="3" />
                    </el-select>
                  </div>
                  <div style="width:80px;margin-left: 10px;">
                    <el-input v-model="params.tagsRuleBO.payAmountNum" size="small" :disabled="diabledEdit || params.tagsRuleBO.checkPayAmount === 0" />
                  </div>
                  <span style="font-size: 11px;margin-left: 10px;">条</span>
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="ruleMeet" label="其他规则：">
              <div style="display: inline-flex;justify-content: flex-start;">
                <el-radio-group v-model="params.tagsRuleBO.ruleMeet" :disabled="diabledEdit">
                  <el-radio :label="1">以上规则满足其一</el-radio>
                  <el-radio :label="2">以上规则全部满足</el-radio>
                </el-radio-group>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button v-if="!diabledEdit" type="primary" @click="submit">确定</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import { delGroupAutoTags, getGroupAutoTagsPageList, addGroupAutoTags, modifyGroupAutoTags, viewGroupAutoTags, changeGroupAutoTagsStatus } from '@/api/cop/group'
import SearchButton from '@/components/SearchButton'

export default {
  components: {
    SearchButton
  },
  data() {
    return {
      activitiesList: [],
      loading: false,
      searchParams: {
        tagsName: ''
      },
      tableCurrentPage: 1,
      pageSize: 20,
      total: 0,
      params: {
        tagsName: '',
        tagsRuleBO: {}
      },
      dialogVisible: false,
      diabledEdit: true,
      rules: {
        tagsName: [{ required: true, message: '请输入名称', trigger: 'blur' }]
      },
      type: 1 // 1 添加 2修改
    }
  },
  created() {
    this.getList()
  },
  methods: {
    refreshParams(params) {
      this.searchParams = {}
    },
    openModal(id, type, bool) {
      this.diabledEdit = bool
      this.operationType = type
      this.dialogVisible = true
      if (type === 2) {
        viewGroupAutoTags({ id })
          .then(response => {
            if (response) {
              this.params = response
              this.params.tagsRuleBO = response.tagsRuleBO
            }
          })
      } else {
        this.params.tagsName = ''
        this.params.tagsRuleBO = {
          checkGroupPersons: 0,
          groupPersonsFormula: '1',
          groupPersonsNum: '',
          checkTalkTimes: 0,
          talkTimesLastDays: '',
          talkTimesDaysFormula: '1',
          talkTimesFormula: '1',
          talkTimesNum: '',
          checkTalkPersons: 0,
          talkPersonsLastDays: '',
          talkPersonsDaysFormula: '1',
          talkPersonsFormula: '1',
          talkPersonsNum: '',
          checkPayTimes: 0,
          payTimesLastDays: '',
          payTimesDaysFormula: '1',
          payTimesFormula: '1',
          payTimesNum: '',
          checkPayPersons: 0,
          payPersonsLastDays: '',
          payPersonsDaysFormula: '1',
          payPersonsFormula: '1',
          payPersonsNum: '',
          checkPayAmount: 0,
          payAmountLastDays: '',
          payAmountDaysFormula: '1',
          payAmountFormula: '1',
          payAmountNum: '',
          ruleMeet: 1
        }
      }
    },
    getList() {
      getGroupAutoTagsPageList({
        pageNum: this.tableCurrentPage,
        pageSize: this.pageSize,
        ... this.searchParams
      }).then(response => {
        if (response) {
          this.activitiesList = response.records
          this.total = response.total
        }
      })
    },
    submit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.operationType === 1) {
            addGroupAutoTags(this.params).then(response => {
              this.$message.success('添加成功')
              this.dialogVisible = false
              this.getList()
            })
          } else {
            modifyGroupAutoTags(this.params).then(response => {
              this.$message.success('修改成功')
              this.dialogVisible = false
              this.getList()
            })
          }
        }
      })
    },
    del(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delGroupAutoTags({ id }).then(response => {
          this.$message.success('删除成功')
          this.getList()
        })
      })
    },
    changeState(scope) {
      this.activitiesList[scope.seq - 1].status = scope.row.status === 1 ? 0 : 1
      changeGroupAutoTagsStatus({
        id: scope.row.id,
        status: scope.row.status === 1 ? 0 : 1
      }).then(response => {
        this.activitiesList[scope.seq - 1].status = scope.row.status === 1 ? 0 : 1
        this.$message.success(scope.row.status === 0 ? '禁用成功' : '启用成功')
      })
    }
  }
}
</script>

<style lang="scss">
.friends_tas {

}
</style>
